<template> 
  <div class="log-box">
    <img class="logo-rz" src="../assets/img/logo-rz.png">
    <div class="main-content">
      <div class="input-box"><span><svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-diary-zhanghao"></use>
                </svg></span><input v-model="dengLuName" id="account" type="text"></div>
      <div class="input-box"><span><svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-diary-password"></use>
                </svg></span><input v-model="dengLuWords" id="password" type="password"></div>
      <div class="log-self">
        <p>自动登录</p>
        <div class="log-self-button">
          <div class="row">
            <input type="checkbox" id="simple_2">
            <label for="simple_2" class="red"></label>
          </div>
        </div>
      </div>
    </div>
    <button class="submit" @click= "logSubmit">登录</button>
    <div class="link-register">
      <p v-on:click="changeView">注册账号</p>
      <p>忘记密码</p>
    </div>
  </div>
</template>
<script>
import Bus from '../assets/js/common/bus'
import { mapActions, mapState } from 'vuex'
import Vue from 'vue'
var vm = new Vue()
export default {
  name: 'rzLog',
  // data:'',
  data() {
    return {
      dengLuName: '',
      dengLuWords: '',
      log_show: false,
      userInfo: {
        userName: '',
        password: '',
        uuid: '',
        token: ''
      }
    }
  },
  computed: {
    ...mapState(['isLogin'])
  },
  methods: {
    ...mapActions(['loginAction', 'userInfoAction']),
    changeView: function() {
      this.$emit('logShowOn', this.log_show)
    },
    IndengLuName(data) {
      // console.log(data);
      // console.log(vm.dengLuName);
      vm.dengLuName = data // 将数据存入到全局对象 Vm 中
      // console.log(vm.dengLuName);
    },
    logSubmit() {
      let dengLuWordsMd5 = this.$md5(this.dengLuWords)
      // console.log(dengLuWordsMd5);
      let app_sign = [
        this.$APPKEY.app_key,
        dengLuWordsMd5,
        'App.User.Login',
        this.dengLuName,
        this.$APPKEY.app_secret
      ]
      // console.log(app_sign);
      let appSignMd5 = this.$md5(app_sign.join('')).toUpperCase()
      if (!this.dengLuName) {
        this.$layer.open({
          content: '请填写账号',
          skin: 'msg',
          time: 2 //2秒后自动关闭
        })
        return false
      }
      if (!this.dengLuWords) {
        this.$layer.open({
          content: '请填写密码',
          skin: 'msg',
          time: 2 //2秒后自动关闭
        })
        return false
      }
      this.$axios
        .get('/api/?s=App.User.Login&=', {
          params: {
            username: this.dengLuName,
            password: dengLuWordsMd5,
            app_key: this.$APPKEY.app_key,
            sign: appSignMd5
          }
        })
        .then(data => {
          console.log(data)
          if (data.status === 200 && data.data.data.err_code === 0) {
            this.$layer.open({
              content: '登录成功',
              skin: 'msg',
              styles: 'background-color:#67d974; color:#fff;',
              time: 1 //2秒后自动关闭
            })
            this.loginAction(1)
            this.userInfo.userName = this.dengLuName
            this.userInfo.password = this.dengLuWords
            this.userInfo.uuid = data.data.data.uuid
            this.userInfo.token = data.data.data.token
            this.userInfoAction(this.userInfo)
            this.$cookies.setCookie(
              'app_rizhi_',
              'uuid=' +
                data.data.data.uuid +
                '&token=' +
                data.data.data.token +
                '&userName=' +
                this.dengLuName +
                '&password=' +
                this.dengLuWords,
              48
            )
            // setTimeout(() => {
            //   console.log(this.$store.state)
            //   console.log(this.$cookies.getCookie('app_rizhi_'))
            // })
            setTimeout(() => {
              // console.log(that.$route);
              if (this.$route.params.fromQuery) {
                this.$router.push({
                  path: this.$route.params.fromQuery
                })
              } else if (this.$route.query.redirect) {
                this.$router.push({
                  path: this.$route.query.redirect
                })
              } else {
                this.$router.go(-1)
              }
            }, 1000)
          } else if (data.status === 200 && data.data.data.err_code === 1) {
            this.$layer.open({
              content: '用户名不存在或密码错误',
              skin: 'msg',
              time: 2 //2秒后自动关闭
            })
          } else {
            return false
          }
        })
        .catch(error => {
          self.fetchError = error
        })
    }
  },
  created() {
    Bus.$on('zcName', this.IndengLuName)
    this.dengLuName = vm.dengLuName
  },
  mounted() {
    // console.log(this.$store.state.isLogin)
    console.log(this.$route)
    // console.log(this.$route);
    // console.log(this.$store.state.userInfo)
    // if (this.$store.state.userInfo != '') {
    //   this.dengLuName = this.$store.state.userInfo.userName
    //   this.dengLuWords = this.$store.state.userInfo.password
    // }
    // this.inputFocus()
  }
}
</script>
<style scoped lang="scss">
</style>
